.promotions{
  margin-top: var(--rem-50);
  max-width: 1250px;
  margin: 0 auto 0;
  .promotions-banner{
    width: 100%;
    height: var(--rem-300);
    background-size: contain;
    display: flex;
    align-items: center;
    .promotions-banner__info{
      padding: var(--rem-55);
      .promotions-banner__monthly{
        background-color: #26BE64;
        color: var(--z-font-white);
        display: inline-block;
        padding: var(--rem-5) var(--rem-14);
        font-size: var(--rem-12);
        text-transform: uppercase;
        border-radius: var(--rem-30);
      }
      .promotions-banner__lucky{
        margin-top: var(--rem-30);
        color: var(--z-font-anti);
        font-weight: 700;
        font-size: var(--rem-36);
      }
      .promotions-banner__surprises{
        color: #5B737E;
        margin-top: var(--rem-10);
        font-weight: 500;
        font-size: 18rem;
      }
    }
  }
  .promotions-tabs{
    margin-top: var(--rem-30);
  }
  .promotions-content{
    display: flex;
    flex-wrap: wrap;
    min-height: var(--rem-300);
    .promotions-content__item{
      width: 25%;
      box-sizing: border-box;
      padding: var(--rem-10) var(--rem-4);
      .promotions-content-wrapper{
        cursor: pointer;
        border-radius: var(--rem-20);
        overflow: hidden;
        img{
          width: 100%;
          height: var(--rem-165);
        }
        .promotions-content__title{
          padding: var(--rem-20) var(--rem-30);
          background-color: var(--z-bg-card);
          line-height: 1.2;
          h3{
            font-size: var(--rem-18);
            text-align: left;
            color: var(--z-font-anti);
          }
          h4{
            font-size: var(--rem-14);
            color: var(--z-font-def);
            margin-top: var(--rem-7);
          }
        }
      }
    }
  }
  &.is-dark{
    .promotions-banner{
      background: url("../../assets/images/promotions/activityBg.png") 50% 50% no-repeat;
    }
  }
  &.is-light{
    .promotions-banner{
      background: url("../../assets/images/promotions/activityBg-light.png") 50% 50% no-repeat;
    }
  }
}
.promotions-dialog{
  padding: 0 var(--rem-15) var(--rem-20) var(--rem-15);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  .promotions-dialog-box{
    height: calc(100% - var(--rem-100));
    overflow-x: hidden;
    overflow-y: auto;
  }
  .bottomOperate{
    height: var(--rem-65);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .promotions-dialog__title{
    font-weight: 700;
    font-size: var(--rem-18);
    line-height: var(--rem-48);
    color: var(--z-font-anti);
    text-align: left;
  }
  .promotions-dialog__img{
    width: 100%;
    display: block;
    border-radius: var(--rem-20);
    margin-top: var(--rem-10);
  }
  .promotions-dialog__info{
    font-size: var(--rem-12);
    line-height: var(--rem-25);
    color: var(--z-font-def);
    margin-top: var(--rem-10);
    span{
      display: block;
      font-size: var(--rem-14);
      color: var(--z-font-anti);
    }
  }
  .promotions-dialog__content{
    margin-top: var(--rem-20);
    font-size: var(--rem-14);
    word-break: break-all;
  }
}
.promotions-h5{
  padding: var(--rem-15);
  .promotions-banner-h5{
    width: 100%;
    display: flex;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    img{
      display: block;
      width: 200rem;
    }
    .promotions-banner-h5__info{
      padding: var(--rem-20);
      .promotions-banner-h5__monthly{
        background-color: #26BE64;
        color: var(--z-font-white);
        display: inline-block;
        padding: var(--rem-3) var(--rem-8);
        font-size: var(--rem-12);
        text-transform: uppercase;
        border-radius: var(--rem-30);
      }
      .promotions-banner-h5__lucky{
        margin-top: var(--rem-10);
        color: var(--z-font-anti);
        font-weight: 700;
        font-size: var(--rem-22);
      }
      .promotions-banner-h5__surprises{
        color: #5B737E;
        margin-top: var(--rem-10);
        font-weight: 500;
        font-size: var(--rem-18);
      }
    }
  }
  .promotions-h5-search{
    height: var(--rem-40);
    background-color: var(--z-bg-card);
    margin-top: var(--rem-15);
    border-radius: var(--rem-40);
    display: flex;
    align-items: center;
    padding: 0 var(--rem-10);
    input{
      display: block;
      height: 80%;
      background: transparent;
      margin: 0 var(--rem-5);
    }
    .promotions-h5-search__selector{
      width: var(--rem-185);
      border-radius: var(--rem-30);
      line-height: var(--rem-30);
      background: var(--z-bg-select-def-h5);
      margin-left: auto;
      box-sizing: border-box;
      padding: 0 var(--rem-15);
    }
  }
  .promotions-content-h5{
    display: flex;
    flex-wrap: wrap;
    min-height: var(--rem-300);
    .promotions-content-h5__item{
      width: 50%;
      box-sizing: border-box;
      padding: var(--rem-10) var(--rem-4);
      cursor: pointer;
      .promotions-content-h5-wrapper{
        border-radius: var(--rem-20);
        overflow: hidden;
        img{
          width: 100%;
          height: var(--rem-105);
          margin: 0 auto;
        }
        .promotions-content-h5__title{
          padding: var(--rem-5) var(--rem-7);
          background-color: var(--z-bg-card);
          line-height: 1.2;
          h3{
            font-size: var(--rem-14);
            text-align: left;
            color: var(--z-font-anti);
          }
          h4{
            font-size: var(--rem-12);
            color: var(--z-font-def);
            margin-top: var(--rem-7);
          }
        }
      }
    }
  }
  &.is-dark{
    .promotions-banner-h5{
      background-image: url("../../assets/images/promotions/activityBgH5.png");
    }
  }
  &.is-light{
    .promotions-banner-h5{
      background-image: url("../../assets/images/promotions/activityBgH5-light.png");
    }
  }
}
.activityNo{
  background-color: #6b7180;
  border-radius: var(--rem-40);
  height: var(--rem-40);
  line-height: var(--rem-40);
  text-align: center;
  color: white;
  width: 80%;
}
.operateBtn{
  background-color: var(--bg-pbtn);
  border-radius: var(--rem-40);
  height: var(--rem-40);
  line-height: var(--rem-40);
  text-align: center;
  color: white;
  width: 80%;
}
